<template>
  <div>
    <Echart
      id="centerLeftChart"
      :options="options2"
      height="320px"
      width="100%"
    />
  </div>
</template>

<script>
import Echart from '@/common/echart'

import {yieldDataDay} from '@/api/yield'

var option

var series = [
  {
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    stack: 'a',
    name: 'a'
  },
  {
    data: [10, 46, 64, '-', 0, '-', 0],
    type: 'bar',
    stack: 'a',
    name: 'b'
  },
  {
    data: [30, '-', 0, 20, 10, '-', 0],
    type: 'bar',
    stack: 'a',
    name: 'c'
  },
  {
    data: [30, '-', 0, 20, 10, '-', 0],
    type: 'bar',
    stack: 'b',
    name: 'd'
  },
  {
    data: [10, 20, 150, 0, '-', 50, 10],
    type: 'bar',
    stack: 'b',
    name: 'e'
  }
]
const stackInfo = {}
for (let i = 0; i < series[0].data.length; ++i) {
  for (let j = 0; j < series.length; ++j) {
    const stackName = series[j].stack
    if (!stackName) {
      continue
    }
    if (!stackInfo[stackName]) {
      stackInfo[stackName] = {
        stackStart: [],
        stackEnd: []
      }
    }
    const info = stackInfo[stackName]
    const data = series[j].data[i]
    if (data && data !== '-') {
      if (info.stackStart[i] == null) {
        info.stackStart[i] = j
      }
      info.stackEnd[i] = j
    }
  }
}
for (let i = 0; i < series.length; ++i) {
  const data = series[i].data
  const info = stackInfo[series[i].stack]
  for (let j = 0; j < series[i].data.length; ++j) {
    // const isStart = info.stackStart[j] === i;
    const isEnd = info.stackEnd[j] === i
    const topBorder = isEnd ? 20 : 0
    const bottomBorder = 0
    data[j] = {
      value: data[j],
      itemStyle: {
        borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
      }
    }
  }
}
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: series
}

var option1
option1 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '12-26',
        '12-27',
        '12-28',
        '12-29',
        '12-30',
        '12-31',
        '01-01'
        // "01-02",
        // "01-03",
        // "01-04",
        // "01-05",
        // "01-06",
        // "01-07",
        // "01-08",
        // "01-09",
        // "01-10",
        // "01-11",
        // "01-12",
        // "01-13",
        // "01-14",
        // "01-15",
        // "01-16",
        // "01-17",
        // "01-18",
        // "01-19",
        // "01-20",
        // "01-21",
        // "01-22",
        // "01-23",
        // "01-24",
        // "01-25",
      ]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '甲班',
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      itemStyle: {
        borderRadius: 0
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210],
      markLine: {
        lineStyle: {
          type: 'dashed'
        },
        data: [[{ type: 'min' }, { type: 'max' }]]
      }
    },
    {
      name: '乙班',
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      itemStyle: {
        borderRadius: 0
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '丙',
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      itemStyle: {
        borderRadius: [10, 10, 0, 0]
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '总成品率',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      // yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#F02FC2'
        }
      },
      data: [236, 339, 236, 435, 337, 336, 132, 336, 239, 232, 236, 336, 236, 432, 236]
    }
  ]
}

var option2
option2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '20%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '12-26',
        '12-27',
        '12-28',
        '12-29',
        '12-30',
        '12-31',
        '01-01'
        // "01-02",
        // "01-03",
        // "01-04",
        // "01-05",
        // "01-06",
        // "01-07",
        // "01-08",
        // "01-09",
        // "01-10",
        // "01-11",
        // "01-12",
        // "01-13",
        // "01-14",
        // "01-15",
        // "01-16",
        // "01-17",
        // "01-18",
        // "01-19",
        // "01-20",
        // "01-21",
        // "01-22",
        // "01-23",
        // "01-24",
        // "01-25",
      ]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '甲班',
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      itemStyle: {
        borderRadius: 0
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210],
      markLine: {
        lineStyle: {
          type: 'dashed'
        },
        data: [[{ type: 'min' }, { type: 'max' }]]
      }
    },
    {
      name: '乙班',
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      itemStyle: {
        borderRadius: 0
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '丙',
      type: 'bar',
      stack: 'Ad',
      barWidth: 20,
      itemStyle: {
        borderRadius: [10, 10, 0, 0]
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '总成品率',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      // yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#F02FC2'
        }
      },
      data: [236, 339, 236, 435, 337, 336, 132, 336, 239, 232, 236, 336, 236, 432, 236]
    }
  ]
}

export default {
  components: {
    Echart,
    yieldDataDay
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {},
      options1: option1,
      options2: option2,
      dayRate: [97, 97, 91, 96, 96, 94, 95],
      nightRate: [97, 95, 95, 96, 96, 91, 95]
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          tooltip: {
            trigger: 'axis',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, .2)',
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            backgroundColor: 'rgba(50,50,50,0.5)',
            textStyle: {
              color: '#FFF'
            },
            borderWidth: 0,
            // backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              // type: "shadow",
              type: 'cross',
              crossStyle: {
                color: '#008acd'
              },
              shadowStyle: {
                color: 'rgba(200,200,200,0.2)'
              },
              label: {
                show: true,
                backgroundColor: '#7B7DDC'
              }
            }
          },
          legend: {
            data: ['产量（重量箱）', '总成品率', '一级品率'],
            textStyle: {
              color: '#B4B4B4'
            },
            top: '0%'
          },
          grid: {
            x: '9%',
            width: '86%',
            y: '4%'
          },
          xAxis: {
            data: newData.dataList,
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4'
                }
              },

              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: '#B4B4B4'
                }
              },
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [
            {
              name: '产量（重量箱）',
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 8,
              // yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#F02FC2'
                }
              },
              data: newData.yieldRateList
            },
            {
              name: '一级品率',
              type: 'bar',
              barWidth: 10,
              yAxisIndex: 1,
              itemStyle: {
                borderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#956FD4' },
                  { offset: 1, color: '#3EACE5' }
                ])
              },
              data: newData.dayList
            },
            {
              name: '总成品率',
              type: 'bar',
              barGap: '-100%',
              barWidth: 10,
              yAxisIndex: 1,
              itemStyle: {

                borderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(156,107,211,0.8)' },
                  { offset: 0.2, color: 'rgba(156,107,211,0.5)' },
                  { offset: 1, color: 'rgba(156,107,211,0.2)' }
                ])
              },
              z: -12,
              data: newData.nightList
            }
          ]
        }
        this.options1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['12-26', '12-27', '12-28', '12-29', '12-30', '12-31', '01-01', '01-02', '01-03', '01-04', '01-05', '01-06'
                // "01-07", "01-08", "01-09", "01-10", "01-11", "01-12", "01-13", "01-14", "01-15", "01-16", "01-17", "01-18", "01-19", "01-20", "01-21", "01-22", "01-23", "01-24", "01-25",
              ]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '甲班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                borderRadius: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#956FD4' },
                  { offset: 1, color: '#c292ad' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [0, 132, 101, 0, 90, 230, 0, 90, 230, 0, 90, 230, 0],
              markLine: {
                lineStyle: {
                  type: 'dashed'
                },
                data: [[{ type: 'min' }, { type: 'max' }]]
              }
            },
            {
              name: '乙班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                borderRadius: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#19be6b' },
                  // { offset: 1, color: "#a3d89f" }
                  { offset: 1, color: '#c7d8c9' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 0, 191, 234, 0, 330, 310, 0, 290, 330, 0, 290, 330, 0]
            },
            {
              name: '丙班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                // borderRadius: [10,10,0,0],
                borderRadius: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#3EACE5' },
                  // { offset: 1, color: "#3EACE5" }
                  { offset: 1, color: '#a0cee5' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 0, 154, 190, 0, 410, 154, 0, 330, 410, 0, 330, 410]
            },
            {
              name: '总成品率',
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 8,
              // yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#F02FC2'
                }
              },
              data: [236, 339, 236, 435, 337, 336, 132, 336, 239, 232, 236, 336, 236, 432, 236]
            }
          ]
        }
        this.options2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            left: 'center',
            top: 20,
            data: ['早班', '晚班']
            // data: ["早班","早班总成品率", "晚班","晚班总成品率"]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: newData.dataList
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '晚班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                borderRadius: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#19be6b' },
                  // { offset: 1, color: "#a3d89f" }
                  { offset: 1, color: '#c7d8c9' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              label: {
                show: true,
                formatter: function(param) {
                  if (param.value === 0) {
                    return ''
                  } else {
                    // console.log(this.dayRate[param.dataIndex]);
                    // return param.value + '\n' + {dayRate[param.dataIndex]|} // todo
                    return param.value
                  }
                },
                // position: 'right',
                offset: [25, -10],
                fontSize: 12
              },
              data: this.formatData(newData.nightList)
            },
            {
              name: '早班',
              type: 'bar',
              stack: 'Ad',
              barWidth: 20,
              itemStyle: {
                borderRadius: 0,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#956FD4' },
                  { offset: 1, color: '#c292ad' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              label: {
                show: true,
                formatter: function(param) {
                  if (param.value === 0) {
                    return ''
                  } else {
                    return param.value
                  }
                },
                // position: 'right',
                offset: [25, -10],
                fontSize: 12
              },
              data: this.formatData(newData.dayList)
              // markLine: {
              //     lineStyle: {
              //         type: 'dashed'
              //     },
              //     data: [[{ type: 'min' }, { type: 'max' }]]
              // }
            }
            // {
            //   name: "晚班总成品率",
            //   type: "line",
            //   smooth: true,
            //   showAllSymbol: true,
            //   symbol: "emptyCircle",
            //   symbolSize: 8,
            //   // yAxisIndex: 1,
            //   itemStyle: {
            //     normal: {
            //       color: "#2093be"
            //     }
            //   },
            //   label: {
            //     show: true,
            //     formatter: function (param) {
            //       if (param.value === 0) {
            //         return ""
            //       } else {
            //         return (param.value - 6000) + '%'
            //       }
            //     },
            //     // position: 'right',
            //     // fontStyle: 'normal',
            //     color: '#2093be',
            //     // color: 'rgba(255, 255, 255, 1)',
            //     textBorderWidth: 0,
            //     textBorderColor: 'rgba(255, 255, 255, 1)',
            //     textBorderType: 'solid',
            //     // fontWeight: 'normal',
            //     // fontFamily: 'Arial',
            //     offset: [25, -1],
            //     // fontSize: 14
            //   },
            //   data: this.formatNightRate(this.nightRate)
            // },
            // {
            //   name: "早班总成品率",
            //   type: "line",
            //   smooth: true,
            //   showAllSymbol: true,
            //   symbol: "emptyCircle",
            //   symbolSize: 8,
            //   itemStyle: {
            //     normal: {
            //       color: "#F02FC2"
            //     }
            //   },
            //   // emphasis: {
            //   //   focus: 'series'
            //   // },
            //   label: {
            //     show: true,
            //     formatter: function (param) {
            //       if (param.value === 0) {
            //         return ""
            //       } else {
            //         return (param.value - 12500) + '%'
            //       }
            //     },
            //     // position: 'right',
            //     // fontStyle: 'normal',
            //     color: '#F02FC2',
            //     // color: 'rgba(255, 255, 255, 1)',
            //     textBorderWidth: 0,
            //     textBorderColor: 'rgba(255, 255, 255, 1)',
            //     textBorderType: 'solid',
            //     // fontWeight: 'normal',
            //     // fontFamily: 'Arial',
            //     offset: [25, -1],
            //     // fontSize: 14
            //   },
            //   data: this.formatDayRate(this.dayRate)
            // },
          ]
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // getYieldDataDay() {
    //   yieldDataDay().then(response => {
    //     this.currentData = response.data;
    //     // this.currentData = this.formatData(response.data);
    //     // 月产未完成
    //     })
    //   // .then(console.log(this.currentData))
    // },
    formatData(data) {
      return data.map(item => Math.round(item))
    },
    formatDayRate(data) {
      return data.map(item => item + 12500)
    },
    formatNightRate(data) {
      return data.map(item => item + 6000)
    },
    nightRateCombine() {},
    dataFileter() {
      // YYYYMMDDHHMMSS
      return [
        { class: '甲', workList: [0, 100, 50, 0, 150, 51] },
        { class: '乙', workList: [0, 100, 50, 0, 150, 51] },
        { class: '丙', workList: [0, 100, 50, 0, 150, 51] }
      ]
    }
  }
}
</script>
